<template>
  <div class="blacklist">
    <div class="blacklist_main">
      <!-- <div class="taberBox">
        <div class="topbar">
          <div>淘宝高佣选品库</div>
          <div>商家合作 帮助中心 申诉成功 放单后台</div>
        </div>
      </div> -->
      <!-- <div class="titleBox">
        <div class="title">高佣黑名单</div>
        <div class="titleX">
          <hr />
          <div>X</div>
        </div>
      </div> -->
      <el-card class="box-card" :body-style="{ padding: '15px' }">
        <div class="searchBox">
          <div style="width:79%;display:flex;justify-content:flex-start">
            <el-select v-model="searchsel" @change="changesearch">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <div style="width:90%">
              <el-input
                style="width:100%"
                v-model.trim="searchipt"
                placeholder="请输入内容"
                @change="dosearch"
                clearable
              ></el-input>
            </div>
          </div>
          <div style="display:flex;justify-content:flex-start;margin-left:10px">
            <el-button
              type="primary"
              style="height:50px;padding-left: 32px;padding-right: 32px;"
              @click="dosearch"
            >
              查 询
            </el-button>
            <el-button type="danger" style="height:50px">举报商家</el-button>
            <el-button type="success" style="height:50px">申诉成功</el-button>
          </div>
        </div>
        <div class="tableBox">
          <div class="radioBox">
            <el-radio-group
              v-model="blackradio"
              fill="#b5e5ff"
              @change="blackchange"
            >
              <el-radio-button label="1">
                <div class="radio">
                  <img
                    :src="require('@/assets/images/blackgoods.png')"
                    style="width:36px;height:36px"
                    alt=""
                  />
                  <span class="text">宝贝黑名单</span>
                </div>
              </el-radio-button>
              <el-radio-button label="2">
                <div class="radio">
                  <img
                    :src="require('@/assets/images/blackuser.png')"
                    style="width:36px;height:36px"
                    alt=""
                  />
                  <span class="text">商家黑名单</span>
                </div>
              </el-radio-button>
            </el-radio-group>
          </div>
          <div class="table_main">
            <div>
              <el-table
                v-loading="loading"
                :data="tableData"
                style="width: 100%"
                :cell-style="rowClass"
                :header-cell-style="headClass"
                ref="singleTable"
                @current-change="handleCurrentChange"
                highlight-current-row
              >
                <el-table-column prop="name" label="掌柜名">
                  <template slot-scope="scope">
                    <div>
                      {{ scope.row.shop_name }}
                    </div>
                    <!-- <div>{{ scope.row.id }}</div> -->
                  </template>
                </el-table-column>
                <el-table-column prop="report_desc" label="举报理由">
                  <template slot-scope="scope">
                    <div style="text-align:center">
                      {{ scope.row.report_desc }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="cooperation_zj_img"
                  label="有效合作证据图"
                >
                  <template slot-scope="scope">
                    <span
                      v-for="(item, index) in scope.row.cooperation_zj_img"
                      :key="index"
                    >
                      <el-image
                        v-if="index < 1"
                        style="width:100px;height:100px"
                        fit
                        :src="item"
                        lazy
                        :preview-src-list="scope.row.cooperation_zj_img"
                      >
                        <div slot="placeholder" class="image-slot">
                          <!-- 加载中<span class="dot">...</span> -->
                          <img
                            style="display:inline-block;width:100%;height:100%"
                            :src="require('@/assets/images/download.gif')"
                            alt=""
                            srcset=""
                          />
                        </div>
                      </el-image>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="violations_zj_img"
                  label="恶意违规证据截图"
                >
                  <template slot-scope="scope">
                    <span
                      v-for="(item, index) in scope.row.violations_zj_img"
                      :key="index"
                    >
                      <el-image
                        v-if="index < 1"
                        fit
                        style="width:100px;height:100px"
                        :src="item"
                        :preview-src-list="scope.row.violations_zj_img"
                        lazy
                      >
                        <div slot="placeholder" class="image-slot">
                          <!-- 加载中<span class="dot">...</span> -->
                          <img
                            style="display:inline-block;width:100%;height:100%"
                            :src="require('@/assets/images/download.gif')"
                            alt=""
                            srcset=""
                          />
                        </div>
                      </el-image>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column prop="goods" label="合作宝贝">
                  <template slot-scope="scope">
                    <!-- style="height:136px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;" -->
                    <div v-if="scope.row.shop_name == ''">无</div>
                    <div v-else>
                      {{ scope.row.goods_url }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="coupon" label="合作优惠卷">
                  <template slot-scope="scope">
                    <!-- style="height:136px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;" -->
                    <div v-if="scope.row.coupon_url == ''">无</div>
                    <div v-else>
                      {{ scope.row.coupon_url }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="qq" label="举报人QQ">
                  <template slot-scope="scope">
                    <span>{{ scope.row.report_qq }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="create_at" label="举报时间">
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.create_at | formatTime("yyyy-MM-dd hh:mm:ss")
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="action" label="申诉入口">
                  <template slot-scope="scope">
                    <el-button
                      type="danger"
                      size="small"
                      v-if="scope.row.status === 3"
                      >永久黑名单</el-button
                    >
                    <el-button
                      type="info"
                      disabled
                      size="small"
                      v-if="scope.row.status === 2"
                      >申诉处理中</el-button
                    >
                    <el-button
                      type="success"
                      size="small"
                      v-if="scope.row.status === 1"
                      @click="goappeal(scope.row.id)"
                      >我要申诉</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div style="margin-top:20px;width:100%;text-align:right">
              <!-- 分页器 -->
              <!-- @size-change="handleSizeChange" -->
              <!-- background -->
              <el-pagination
                @current-change="handleCurrentChange2"
                :current-page="currentPage"
                :page-size="pagesize"
                :pager-count="11"
                layout="total, prev, pager, next, jumper"
                :total="count"
              >
                <!-- :page-sizes="[100, 200, 300, 400]" -->
              </el-pagination>
            </div>
          </div>
        </div>
      </el-card>
      <div class="black_footer">
        <div>
          商家黑名单—扫除不合规的商家，为淘客创建一个干净的推广环境!
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBlackList } from "@/api/user/user";
export default {
  name: "blacklist",
  filters: {
    formatTime: function(datetime, fmt) {
      var date = new Date(datetime);
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      var o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds()
      };
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          var str = o[k] + "";
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1 ? str : ("00" + str).substr(str.length)
          );
        }
      }
      return fmt;
    }
  },
  data() {
    return {
      cooperList: [],
      pagesize: 30,
      currentPage: 1,
      count: 0,
      searchipt: "",
      searchsel: "1",
      blackradio: "1",
      options: [
        {
          value: "1",
          label: "按掌柜名搜索"
        },
        {
          value: "2",
          label: "按宝贝链接搜索"
        }
      ],
      loading: false,
      activeName: "1",
      searchradio: "1",
      tableData: [
        // {
        //   id: 15, // 商品id
        //   cooperation_zj_img: [
        //     "require(`@/assets/images/goodsimg.jpg`)",
        //     'require("@/assets/images/goodsimg.jpg")',
        //     'require("@/assets/images/goodsimg.jpg")'
        //   ], //合作证据
        //   violations_zj_img: [
        //     'require("@/assets/images/goodsimg.jpg")',
        //     'require("@/assets/images/goodsimg.jpg")',
        //     'require("@/assets/images/goodsimg.jpg")'
        //   ], //违规截图
        //   shop_name: "啊哈", //掌柜名
        //   report_desc: "理由", //举报理由
        //   create_at: "2020-05-02 15:26:20", //开始时间
        //   goods_url: "https://item.taobao.com/item.htm?id=590124038248", //合作宝贝
        //   coupon_url:
        //     "http://uland.taobao.com/quan/detail?sellerId=767170224&activityId=d5a59ede9da645138ce448fc349122ab", //合作优惠卷
        //   report_qq: "20001215215",
        //   status: 1 //qq
        // }
      ],
      type: "1"
    };
  },

  computed: {},
  created() {
    this.getBlackList(1, 15);
  },
  mounted() {},
  methods: {
    dosearch() {
      console.log(this.searchipt);
      console.log(this.searchsel);
      if (this.searchsel == 1) {
        this.getBlackList(1, 15, this.type, "", this.searchipt);
      } else {
        this.getBlackList(1, 15, this.type, this.searchipt, "");
      }
    },
    blackchange(val) {
      console.log(val);
      this.type = val;
      this.getBlackList(this.currentPage, 15, this.type);
    },
    handleCurrentChange2(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getBlackList(this.currentPage, 15);
    },
    getBlackList(page, pagesize, type, goods_url, shop_name) {
      getBlackList({
        page: page,
        pagesize: pagesize,
        type: type,
        shop_name: shop_name,
        goods_url: goods_url
      })
        .then(res => {
          this.count = res.data.count;
          this.tableData = res.data.data;
          console.log("黑名单列表", this.tableData);
          if (res.data.data.length > 0) {
            // let arr = [];
            this.tableData.forEach(function(val, index, arr) {
              let relearr = res.data.data[index].cooperation_zj_img.split(",");
              // console.log(relearr);
              arr[index].cooperation_zj_img = relearr.map(function(obj) {
                var rObj = {};
                rObj = "http://" + obj;
                return rObj;
              });
              // console.log("有效合作截图", arr[index].cooperation_zj_img);
              let relearr2 = res.data.data[index].violations_zj_img.split(",");
              // console.log(relearr2);
              arr[index].violations_zj_img = relearr2.map(function(obj) {
                var rObj = {};
                rObj = "http://" + obj;
                return rObj;
              });
              // console.log("违规证据截图", arr[index].violations_zj_img);
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    goappeal(id) {
      console.log("id", id);
    },
    changesearch(val) {
      this.searchsel = val;
      console.log(val);
      //   this.$message("click on item " + val);
    },
    // 表头背景色
    headClass() {
      return "text-align: center;background:#fff;color:black;font-size:18px";
    },
    // 表格样式设置
    rowClass() {
      return "text-align: center;";
    },
    // 表格选中行高亮
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    }
  }
};
</script>

<style lang="less" scoped>
.blacklist {
  width: 100%;
  background-color: #fafaf9;
  .blacklist_main {
    width: 100%;
    margin: 0 auto;
    background-color: #f6f6f6;
    .taberBox {
      position: fixed;
      top: 0;
      width: 100%;
      background-color: #fff;
      .topbar {
        width: 80%;
        height: 40px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    .titleBox {
      width: 100%;
      .title {
        // width: 1000px;
        width: 100%;
        margin-top: 50px;
        letter-spacing: 14px;
        font-size: 30px;
        text-align: center !important;
        margin-bottom: 40px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
        color: #333;
        font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial,
          "Microsoft YaHei", FreeSans, Arimo, "Droid Sans",
          "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3",
          FontAwesome, sans-serif;
      }
      .titleX {
        // width: 1000px;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        padding-bottom: 40px;
        hr {
          width: 180px;
          border-top: 2px solid #333;
          margin: 0;
          box-sizing: content-box;
          margin: 0 auto;
        }
        div {
          width: 40px;
          font-size: 30px;
          margin: 0 auto;
          margin-top: -20px;
          background-color: #f6f6f6;
          font-family: Georgia, "Times New Roman", Times, Kai, "Kaiti SC", KaiTi,
            BiauKai, FontAwesome, serif;
        }
      }
    }
    .searchBox::v-deep {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // width: 1000px;
      width: 90%;
      margin: 0 auto;
      .el-input__inner {
        height: 50px;
      }
    }
    .tableBox {
      width: 100%;
      margin-top: 20px;
      .radioBox::v-deep {
        // width: 1000px;
        width: 100%;
        margin: 0 auto;
        // box-sizing: border-box;
        padding: 10px;
        padding-bottom: 20px;
        .el-radio-button__inner {
          padding: 0;
          width: 100%;
        }
        .el-radio-group {
          margin: 0 auto;
          width: 100%;
        }
        .el-radio-button {
          width: 48%;
        }
        // .is-active {
        //   background-color: #b5e5ff !important;
        // }
        .radio {
          display: flex;
          justify-content: center;
          align-items: center;
          // width: 50%;
          height: 50px;
          margin: 0 auto;
          .text {
            margin: 10px;
            font-size: 20px;
          }
        }
      }
      .table_main {
        width: 100%;
        // width: 1000px;
        margin: 0 auto;
      }
    }
    .black_footer {
      margin-top: 10px;
      font-size: 18px;
    }
  }
}
</style>
